<template>

	<view class="" style="height: 100%;position: relative;min-height: 95vh;">
		<u-skeleton :loading="isFirst" rows="15">
			<view class="" v-if="data.data">
				<view class="" v-if="data.data.length==0">
					<u-empty style="" text="暂时没有错题" icon="../../../../static/imgs/data.png">
					</u-empty>
				</view>
				 <view class=""  v-if="data.data.length!=0">
				 	   <view class="aa">
				 	   	<view class="allContent" >
				 	   		<view class="top">
				 	   
				 	   			<view class="" style="margin-top: 10rpx;">
				 	   				<view class="title-type">
				 	   					<view class="floatleft" style="margin-left:20rpx">
				 	   						<view class="y_tag y_tag_bgPrimary" style="margin-top: 10rpx;">
				 	   							{{dindex+1}}.单选题
				 	   						</view>
				 	   					</view>
				 	   
				 	   					<view class="floatright" style="margin-right: 10rpx;">
				 	   						<view class="y_tag y_tag_bgWarning" style="margin-top: 10rpx;" v-if="data.data">
				 	   							{{data.data[dindex].labels}}
				 	   						</view>
				 	   					</view>
				 	   				</view>
				 	   			</view>
				 	   
				 	   		</view>
				 	   
				 	   		<!-- <view class="allContent" :animation="animation"> -->
				 	   
				 	   		<view class="content">
				 	   			<view class="title-content">
				 	   				<rich-text v-if="data.data" :nodes="data.data[dindex].content"></rich-text>
				 	   			</view>
				 	   
				 	   		</view>
				 	   
				 	   		<view style="width: 100%;" v-for="(item,i) in data.data[dindex].options" :key="item.id">
				 	   			<view class="options"
				 	   			    v-if="data.data[dindex].options"
				 	   				:class="[item.id==data.data[dindex].answer?'isError':'',item.isRight==1?'selectOptions':'']">
				 	   				{{check[i]}}. {{item.content}}
				 	   			</view>
				 	   
				 	   		</view>
				 	   
				 	   		<u-divider />
				 	   
				 	   
				 	   		<view style="display: flex;">
				 	   			<view class="prev">
				 	   				<u-button @click="prev" :disabled='dindex<=0' type="warning">上一题</u-button>
				 	   			</view>
				 	   
				 	   
				 	   			<view class="next">
				 	   				<u-button @click="next" :disabled='dindex+1==pages.total'
				 	   					v-if="dindex+1!=pages.page*pages.limit" type="primary">下一题</u-button>
				 	   
				 	   				<u-button @click="getTopic" :disabled='data.data.length-1==pages.total'
				 	   					v-if="dindex+1==pages.page*pages.limit" type="primary">加载更多</u-button>
				 	   			</view>
				 	   
				 	   		</view>
				 	   
				 	   
				 	   
				 	   
				 	   		<view class="" style="margin-bottom: 70rpx;">
				 	   			<view class="errorperson"
				 	   				v-if="data.data[dindex].createTime==''|| data.data[dindex].createTime==null"
				 	   				style="background-color: rgb(236, 249, 255); color:blue;">
				 	   			</view>
				 	   
				 	   
				 	   			<view class="errorperson" v-else
				 	   				style="background-color: rgb(236, 249, 255); color: rgb(25, 137, 255);display: flex;">
				 	   				<view class="icon iconfont icon-icon_gantanhaozhong" style="font-size: 40rpx;float: left;">
				 	   					<view class="floatright" style="margin-top: -8rpx;margin-left: 10rpx;">
				 	   						<text style="font-size: 24rpx;">于 【{{data.data[dindex].createTime}}】加入收藏</text>
				 	   					</view>
				 	   				</view>
				 	   			</view>
				 	   		</view>
				 	   
				 	   	</view>
				 	   	<!-- 在阴影内 -->
				 	   
				 	   
				 	   
				 	   
				 	   
				 	   
				 	   </view>
				 	   
				 	   <view class="" style="position: absolute;bottom: 0px;"  v-if="data.data">
				 	   	<view class="footers">
				 	   
				 	   		<view class="mylove" @click="showModal">
				 	   			<u-modal :show="show" @confirm="deleteLikes(data.data[dindex])" 
				 	   			ref="uModal" 
				 	   			:asyncClose="true" 
				 	   			@cancel="()=>show=false"
				 	   			showCancelButton>
				 	   				确认要移除吗?
				 	   			</u-modal>
				 	   			<div class="icon iconfont icon-shanchu">
				 	   				<text style="padding-left: 10rpx; font-size: 30rpx;">删除</text>
				 	   			</div>
				 	   		</view>
				 	   		<view class="mylove">
				 	   			<div class="icon iconfont icon-renwu">
				 	   				<text
				 	   					style="padding-left: 10rpx; font-size: 30rpx;">{{dindex+1}}/{{data.data.length}}题</text>
				 	   			</div>
				 	   		</view>
				 	   		<view class="mylove">
				 	   			<div class="icon iconfont icon--_kucunshuliangtongji">
				 	   				<text style="padding-left: 10rpx; font-size: 30rpx;">共{{pages.total}}题</text>
				 	   			</div>
				 	   		</view>
				 	   	</view>
				 	   </view>
				 </view>
			</view>
			
		</u-skeleton>
	</view>

</template>

<script>
	import {
		GetLikeQuestions,
		AddLikeQuestion,
		DeleteLikeQuestion,
		ClearWrongQuestions
	} from '../../../../api/brush_questions.js';
	export default {
		data() {
			return {
				id: "",
				data: {},
				dindex: 0,
				check: ["A", "B", "C", "D", "E", "F", "G"],
				pages: {
					limit: 20,
					page: 1,
					total: 0
				},
				isFirst: true,
				show: false
			}
		},
		onShow() {
			this.getCuotiQuestions();
		},
		onLoad(options) {
			this.id = options.id;
		},
		methods: {
			showModal() {
				this.show = true;
			},

			/**删除收藏
			 * @param {Object} val
			 */
			deleteLikes(val) {
				const obj = val;
				DeleteLikeQuestion({
					id: obj.id
				}).then(res => {
					setTimeout(() => {
						// 3秒后自动关闭
						this.show = false;
					}, 1000)
					if (res.result === 0) {
						uni.showToast({
							icon: "none",
							title: "操作成功"
						})
						this.data.data.map((d,i) => {
							if (d.id == obj.id) {
								this.data.data.splice(i,1);
							}
						})
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			/**
			 * 添加收藏
			 */
			addlikes(val) {

				const obj = val;
				AddLikeQuestion({
					id: obj.qid
				}).then(res => {
					if (res.result === 0) {
						uni.showToast({
							icon: "none",
							title: "操作成功"
						})
						this.data.data.map(d => {
							if (d.qid == obj.qid) {
								d.isLike = 1;
							}
						})
						console.log(this.data.data);
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			/**
			 * 获取更多的试题
			 */
			getTopic() {
				uni.showLoading({
					title: "请稍后..."
				});
				const {
					id,
					pages,
					check
				} = this;
				this.pages.page += 1;
				GetCuotiQuestions({
					page: this.pages.page,
					limit: this.pages.limit
				}).then((res) => {
					if (res.result === 0) {
						this.pages.total = res.data.total;
						let newSz = this.data.data.concat(res.data.data);
						this.data.data = newSz;
						uni.hideLoading();
						this.next();

					} else if (res.result == -1) {
						uni.showToast({
							icon: "none",
							title: res.message
						})
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/exam/exam"
							})
						}, 1000);
					} else {
						uni.reLaunch({
							url: "/pages/index/index"
						});
					}
				})
			},
			/**
			 * 获取收藏数据
			 */
			getCuotiQuestions() {
				const {
					id,
					check
				} = this;

				GetLikeQuestions({
					page: this.pages.page,
					limit: this.pages.limit
				}).then((res) => {

					if (res.result === 0) {
						this.pages.total = res.data.total;
						this.data = res.data;
						this.isFirst = false;

					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/index/index"
							})
						}, 1000);
					}
				})
			},


			/**
			 * 上一题
			 */
			prev() {
				let {
					dindex,
					data
				} = this;

				// index =index- 1;
				// this.setData({
				//   index: index
				// });
				if (dindex <= 0) {
					return
				}
				setTimeout(() => {
					this.dindex = dindex - 1;
				}, 350);
			},

			/**
			 * 下一题
			 */
			next() {

				let {
					dindex,
					data
				} = this;
				// if (index >= testpaper.length - 1) {
				//   return
				// }
				// index += 1;
				// this.setData({
				//   index: index
				// });
				setTimeout(() => {
					this.dindex = dindex + 1;

				}, 350);


			},



			close() {
				this.show = false
			},

			//倒计时改变事件
			onChange(e) {
				this.timeData = e
			},

		}
	}
</script>

<style scoped lang="scss">
	@import url("/static/main.css");
	@import url("/static/iconfont/icons.css");

	.father {
		width: 100vw;
		height: 100%;
		position: relative;
	}

	.love {
		position: fixed;
		bottom: 0px;
	}

	.green {
		color: rgb(7, 193, 96);
	}

	.red {
		color: red;
	}

	.footers {
		/* border: 1px solid #000; */
		margin-top: 156rpx;
		border-top: 1px solid #eee;
		width: 100vw;
		display: flex;
		align-items: center;
		/* font-weight: 600; */
	}

	.mylove {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		flex: 1;
	}

	.mylove:not(:last-child) {
		border-right: 1px solid #eee;
	}





	.errorperson {
		margin-top: 20rpx;
		background-color: rgb(251, 227, 225);
		width: 100%;
		// margin-left: 2.1%;
		color: rgb(219, 118, 132);
		font-size: 26rpx;
		padding: 16rpx;
	}

	.answers {
		margin-top: 26rpx;
		width: 100%;
		display: flex
	}

	.answer {
		flex: 1;
		text-align: center;
		font-size: 26rpx;
		font-weight: 600;
	}


	.top {
		height: 66rpx;
		line-height: 66rpx;
		border: 1px solid #eee;
		background: #fff;
	}

	.qcount {
		margin-right: 20rpx;
		color: rgb(199, 196, 196);
	}


	.title-type {
		height: 60rpx;
		line-height: 60rpx;
		background-color: #fff;
	}


	.title-content {
		// background-color: rgb(241, 241, 241);
		min-height: 100rpx;
		width: 100%;
		border-radius: 8rpx;
		padding-bottom: 10rpx;
		// margin-left: 0.9%;
		// padding: 0 8rpx 8rpx 8rpx;
		margin-top: 10rpx;
		padding: 6rpx;
	}

	.content {
		border: 1px solid #eee;
		padding-bottom: 10rpx;
	}


	.options {
		border: 1px solid #eee;
		width: 90%;
		padding: 2.5%;
		margin-top: 20rpx;
		margin-left: 18rpx;
		// text-align: center;
		border-radius: 12rpx;
	}

	.selectOptions {
		background-color: rgb(7, 193, 96) !important;
		color: #fff !important;
	}

	.isError {
		background-color: red;
		color: #fff !important;
	}

	 .prev{
		 flex: 1;
		 margin-left: 10rpx;
		 margin-right: 5rpx;
	 }
	
	.next {
		flex: 1;
		margin-right: 10rpx;
		margin-left: 5rpx;
		 // width: 59vw;
		// margin-left: 1%;
		// margin-top: 20rpx;
		margin-top: 0rpx;
	}


	.tan {
		width: 50rpx;
		height: 50rpx;
		margin: 10rpx;
		margin-left: 10rpx;
		line-height: 50rpx;
		text-align: center;
		float: left;
		border: 1px solid #1989fa;
		color: #1989fa;
		border-radius: 10rpx;
	}

	.allContent {
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, .12), 0 0 12rpx rgba(0, 0, 0, .04);
	}




	.time {
		@include flex;
		align-items: center;

		&__custom {
			margin-top: 4px;
			width: 22px;
			height: 22px;
			background-color: $u-primary;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				color: #fff;
				font-size: 12px;
				text-align: center;
			}
		}

		&__doc {
			color: $u-primary;
			padding: 0px 4px;
		}

		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}



	.examing-title {
		margin-top: 20rpx;
		width: 100%;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
	}


	.cell-hover-class {
		background-color: rgb(235, 237, 238);
	}

	/* 或者单是设置透明度 */
	.cell-hover-class {
		opacity: 0.5;
	}
</style>